<template>
  <div>
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="商品ID">
          <el-input
            v-model="searchForm.goods_id"
            placeholder="请输入商品ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input
            v-model="searchForm.goods_name"
            placeholder="请输入商品名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >搜索</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right:15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <el-button
        size="small"
        class="add-btn"
        icon="el-icon-plus"
        @click="$router.push({name: 'goodsAdd'})"
      >发布商品</el-button>
      <el-button
        size="small"
        class="delete-btn"
        icon="el-icon-delete"
        @click="handleDelete(1)"
      >批量删除</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      v-show="tableData.length > -1"
      @selection-change="handleSelectionChange"
      @select="handleSelectionRow"
    >
      <el-table-column
        type="selection"
        width="50"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="id"
        label="商品ID"
        width="80"
      />
      <el-table-column
        align="center"
        prop="title"
        label="商品名称"
        width="200"
      />
      <el-table-column
        align="center"
        prop="cate_name"
        label="品类"
      />
      <el-table-column
        align="center"
        prop="username"
        label="编辑账号"
      />
      <el-table-column
        align="center"
        prop="update_time"
        label="修改时间"
        width="200"
      />
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="edit(scope.row.id)"
          >编辑</el-button>
          <el-button
            v-if="$hasMethod('#delete')"
            type="danger"
            size="mini"
            @click="handleDelete(2,scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
  </div>
</template>

<script>
import customPage from "@/components/customPage";
import { getGoodsDraft, batchDeleteGoodsDraft } from "@/api/goods";
export default {
  components: { customPage },
  data() {
    return {
      searchForm: {
        goods_id: null,
        goods_name: "",
      },
      total: 0,
      tableData: [],
      multipleSelection: []
    }
  },
  methods: {
    edit(goodsId) {
      this.$router.push({ name: 'goodsAdd', params: { draftId: goodsId } });
    },
    handleSelectionChange(val) {
      console.log('多选', val)
      this.multipleSelection = val;
    },
    handleSelectionRow(val) {
      console.log('xuanze', val)
    },
    handleDelete(num, id) {
      let tip = "", title = "";
      let ids = []
      if (num == 1) {
        // console.log('del',num,this.multipleSelection)
        if (this.multipleSelection.length == 0) {
          this.$message.warning('请先选择数据')
          return false
        } else {
          let idList = []
          this.multipleSelection.forEach(item => {
            idList.push(item.id)
          })
          ids = idList.join(',')
        }
        tip = "删除草稿后，已编辑的草稿内容将全部清除，需重新编辑，请确认是否要批量删除草稿？",
          title = "批量删除"
      } else {
        ids = id
        tip = "您确定要删除这条草稿吗？";
        title = "删除";
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        batchDeleteGoodsDraft(ids).then(res => {
          this.getList(true);
        });
      }).catch(() => { });
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.searchForm = {
        goods_id: null,
        goods_name: "",
      };
      this.getList();
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage;
      if (!flag) {
        this.tableData = [];
      }
      getGoodsDraft({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || [];
        this.total = res.total;
      })
    }
  },
  mounted() {
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
.goods_info {
  .info {
    margin-left: 10px;
    p {
      color: #666666;
    }
    p:first-child {
      color: #999999;
    }
  }
}
.dropClass {
  margin-right: 10px;
}
</style>
